<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>航班信息</title>
    <script type="text/javascript" src="js/jquery-1.8.3.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            select();
            $("#search").click(function () {
                select();
            });
            $(document).on("click", "#selectTicket", function () {
                let id = this.getAttribute('thisid');
                    $.get("flight/selectTicket", {"id":id}, function (result) {
                        let ticketList = result.result;
                        showTicket(ticketList, id);
                    });
            });
        });
        function select() {
            let date = $("#date").val();
            let take = $("#take").val();
            let landing = $("#landing").val();
            $.get("flight/select", {
                "date":date,
                "take_city_name":take,
                "landing_city_name":landing
            }, function (result) {
                let list = result.result;
                show(list);
            });
        }
        function show(list) {
            $("#bodyer").empty();
            for (var i = 0; i < list.length; i++) {
                $("<tr>" +
                    "<td>"+list[i].airline+"/"+list[i].type+"</td>" +
                    "<td>"+list[i].take_time+"——"+list[i].landing_time+"</td>" +
                    "<td>"+list[i].take_airport_name+"<br/>"+list[i].landing_airport_name+"</td>" +
                    "<td>"+list[i].flight_time+"</td>" +
                    "<td>"+list[i].stop_airport+"</td>" +
                    "<td>￥"+list[i].reference_price+"<br/><input type='button' thisid = '"+list[i].id+"' isshow = 'false' id='selectTicket' value='查询机票'></td>" +
                    "</tr>" +
                    "<tr id='"+list[i].id+"'></tr>").appendTo("#bodyer");
            }
        }
        function showTicket(list, id) {
            $("#"+id).empty();
            for (var i = 0; i < list.length; i++) {
                $("<tr colspan = '2'>" +
                    "<td style='width: 200px'>"+list[i].sell_company+"</td>" +
                    "<td style='width: 200px'>"+list[i].ticket_price+"</td>" +
                    "</tr>").appendTo("#"+id);
            }
        }
    </script>
</head>
<body>
    <h1>航班查询</h1>
    日期：<input type="text" id="date"/>
    城市：从<input type="text" id="take"/>
    到<input type="text" id="landing"/>
    <input type="button" id="search" value="搜索">
    <table border="2px">
        <thead id="header">
            <tr>
                <td style="width: 200px">航空公司/航班机型</td>
                <td style="width: 200px">起降时间</td>
                <td style="width: 200px">机场</td>
                <td style="width: 200px">飞行时长</td>
                <td style="width: 200px">经停</td>
                <td style="width: 200px">参考报价</td>
            </tr>
        </thead>
        <tbody id="bodyer">

        </tbody>
    </table>

</body>
</html>